.nom-radio-list.p-uistyle-radio {
  >.nom-field-content {
    >.nom-list {
      >.nom-list-content {
        margin: -0.5rem -0.5rem;

        >.nom-list-item-wrapper {
          padding: 0.5rem 0.5rem;

          >label {
            position: relative;
            display: inline-flex;
            padding-top: @padding-y-base;
            padding-bottom: @padding-y-base;
            font-size: 1rem;
            line-height: @line-height-base;
            vertical-align: middle;
            cursor: pointer;
            transition: all 0.3s;

            i {
              position: absolute;
              display: none;
              width: calc(1rem + 2px);
              height: calc(1rem + 2px);
              margin-top:~'calc((1em * @{line-height-base} - 1em - 2px)/2)';
              background-color: var(--nom-checkbox-checked-bg);
              border: 1px solid var(--nom-checkbox-checked-border-color);
              border-radius: var(--nom-checkbox-border-radius);
              border-radius: 50%;
              -webkit-animation: nom-radio-list-keyframe-show .36s ease-in-out backwards;
              animation: nom-radio-list-keyframe-show .36s ease-in-out backwards;
              content: "";
            }

            >span.radio {
              position: relative;
              z-index: 9;
              width: calc(1rem + 2px);
              min-width: calc(1rem + 2px);
              height: calc(1rem + 2px);
              min-height: inherit;
              margin-top:~'calc((1em * @{line-height-base} - 1em - 2px)/2)';
              margin-right: 0.5rem;
              background-color: var(--nom-checkbox-bg);
              border: 1px solid var(--nom-checkbox-border-color);
              border-radius: 50% !important;
              box-shadow: var(--nom-checkbox-box-shadow);
              transition: all .1s cubic-bezier(.71, -.46, .88, .6);

              &:hover {
                background-color: var(--nom-checkbox-bg-hover);
                border-color: var(--nom-checkbox-checked-border-color);
              }
            }

            &.s-selected {
              >span.radio {
                background-color: var(--nom-checkbox-checked-bg);
                border-color: var(--nom-checkbox-checked-border-color);

                &::after {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  display: block;
                  width: 6px;
                  height: 6px;
                  margin-top: -3px;
                  margin-left: -3px;
                  background: var(--nom-checkbox-checker-color);
                  border: solid var(--nom-checkbox-checker-color);
                  border-radius: 100% !important;
                  box-shadow: var(--nom-checkbox-checker-box-shadow);
                  -webkit-animation: nom-radio-list-keyframe-bounce-in .2s cubic-bezier(.12, .4, .29, 1.46) forwards;
                  animation: nom-radio-list-keyframe-bounce-in .2s cubic-bezier(.12, .4, .29, 1.46) forwards;
                  content: '';
                }

              }

              i {
                display: block;
              }
            }
          }
        }
      }


      label.s-disabled {
        cursor: not-allowed !important;
        opacity: 0.7;

        span.radio {
          background-color: var(--nom-input-bg-disabled);
          border-color: var(--nom-checkbox-border-color) !important;
        }

      }

      &.s-disabled label {
        cursor: not-allowed !important;
        opacity: 0.7;

        span.radio {
          background-color: var(--nom-input-bg-disabled);
          border-color: var(--nom-checkbox-border-color) !important;
        }
      }

    }
  }
}

.nom-radio-list.p-uistyle-button {
  >.nom-field-content {
    >.nom-list {
      >.nom-list-content {
        display: inline-flex;

        >.nom-list-item-wrapper {
          &:first-child {
            padding-left: 1px;
          }

          >label {
            position: relative;
            display: inline-flex;
            margin-left: -1px;
            padding-top: @padding-y-base;
            padding-right: @padding-x-base;
            padding-bottom: @padding-y-base;
            padding-left: @padding-x-base;
            font-size: 1rem;
            line-height: @line-height-base;
            background-color: @white;
            border: 1px solid #d9d9d9;
            cursor: pointer;
            transition: all 0.3s;
          }

          &:first-child>label {
            border-left: 1px solid #d9d9d9;
            border-radius: 4px 0 0 4px;
          }

          &:last-child>label {
            border-radius: 0 4px 4px 0;
          }

          >label.s-selected {
            color: var(--nom-color-primary);
            border-color: var(--nom-color-primary);
          }

          label:hover {
            color: var(--nom-color-primary);
          }

          label.s-disabled {
            color: initial;
            cursor: not-allowed !important;
            opacity: 0.7;
          }
        }
      }
    }
  }
}

@-webkit-keyframes nom-radio-list-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(.6);
    transform: scale(.6);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nom-radio-list-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(.6);
    transform: scale(.6);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes nom-radio-list-keyframe-show {
  0% {
    transform: scale(1);
    opacity: .5
  }

  to {
    transform: scale(1.7);
    opacity: 0
  }
}

@keyframes nom-radio-list-keyframe-show {
  0% {
    transform: scale(1);
    opacity: .5
  }

  to {
    transform: scale(1.7);
    opacity: 0
  }
}
